<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>接口记录与分析工具</title>

    <!-- 引入 Vue 和 Element UI 的 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.5/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.5/lib/index.js"></script>

    <!-- 引入 Axios CDN -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>
<body>

<div id="app">
    <el-container>
        <el-header style="text-align: center">
            <h2>Controller 控制层记录</h2>
        </el-header>

        <el-main>
            <!-- 搜索框 -->
            <el-row style="margin-bottom: 20px;" gutter={20}>
                <el-col :span="3" style="margin-right: 10px; margin-bottom: 10px;">
                    <el-input v-model="recordControllerBo.requestId" size="small" placeholder="请求ID" clearable></el-input>
                </el-col>
                <el-col :span="3" style="margin-right: 10px; margin-bottom: 10px;">
                    <el-input v-model="recordControllerBo.requestMethod" size="small" placeholder="请求方法" clearable></el-input>
                </el-col>
                <el-col :span="3" style="margin-right: 10px; margin-bottom: 10px;">
                    <el-input v-model="recordControllerBo.functionName" size="small" placeholder="功能名" clearable></el-input>
                </el-col>
                <el-col :span="3" style="margin-right: 10px; margin-bottom: 10px;">
                    <el-input v-model="recordControllerBo.moduleName" size="small" placeholder="模块名" clearable></el-input>
                </el-col>
                <el-col :span="3" style="margin-right: 10px; margin-bottom: 10px;">
                    <el-input v-model="recordControllerBo.timestamp" size="small" placeholder="时间戳" clearable></el-input>
                </el-col>
                <el-col :span="3" style="margin-right: 10px; margin-bottom: 10px;">
                    <el-input v-model="recordControllerBo.params" size="small" placeholder="参数" clearable></el-input>
                </el-col>
                <el-col :span="3" style="margin-right: 10px; margin-bottom: 10px;">
                    <el-input v-model="recordControllerBo.returnMessage" size="small" placeholder="返回信息" clearable></el-input>
                </el-col>
                <el-col :span="3" style="margin-right: 10px; margin-bottom: 10px;">
                    <el-input v-model="recordControllerBo.exceptionMessage" size="small" placeholder="异常信息" clearable></el-input>
                </el-col>

                <!-- 搜索和重置按钮 -->
                <el-col :span="6" style="margin-bottom: 10px;">
                    <el-button size="small" type="primary" @click="searchData">搜索</el-button>
                    <el-button size="small" @click="resetSearch">重置</el-button>
                    <!-- 新增的跳转按钮 -->
                    <el-button size="small" @click="goToHomePage">回到主页面</el-button>
                </el-col>
            </el-row>

            <!-- 表格组件 -->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="requestId" label="请求ID" show-overflow-tooltip></el-table-column>
                <el-table-column prop="timestamp" label="时间戳" show-overflow-tooltip></el-table-column>
                <el-table-column prop="requestMethod" label="请求方法" show-overflow-tooltip></el-table-column>
                <el-table-column prop="functionName" label="功能名" show-overflow-tooltip></el-table-column>
                <el-table-column prop="moduleName" label="模块名" show-overflow-tooltip></el-table-column>
                <el-table-column prop="params" label="参数" show-overflow-tooltip></el-table-column>
                <el-table-column prop="returnMessage" label="返回信息" show-overflow-tooltip></el-table-column>
                <el-table-column prop="exceptionMessage" label="异常信息" show-overflow-tooltip></el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :total="totalItems"
                    layout="prev, pager, next"
                    style="margin-top: 20px;">
            </el-pagination>
        </el-main>
    </el-container>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            totalItems: 0,
            recordControllerBo: {
                requestId: '',
                requestMethod: '',
                functionName: '',
                moduleName: '',
                timestamp: '',
                params: '',
                returnMessage: '',
                exceptionMessage: ''
            },
            sortField: '',
            sortOrder: ''
        },
        methods: {
            handleCurrentChange(page) {
                this.currentPage = page;
                this.fetchData();
            },
            searchData() {
                this.fetchData();
            },
            resetSearch() {
                // 重置搜索条件
                this.recordControllerBo = {
                    requestId: '',
                    requestMethod: '',
                    functionName: '',
                    moduleName: '',
                    timestamp: '',
                    params: '',
                    returnMessage: '',
                    exceptionMessage: ''
                };
                this.fetchData();
            },
            goToHomePage() {
                // 跳转到主页面
                window.location.href = "/index.html"; // 跳转到主页面
            },
            fetchData() {
                axios.post(`http://localhost:8081/performanceController/page?currentPage=${this.currentPage}&pageSize=${this.pageSize}`,
                    this.recordControllerBo, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => {
                        this.tableData = response.data.data.map(item => {
                            for (let key in item) {
                                if (item[key] === null || item[key] === '') {
                                    item[key] = '无';
                                }
                            }
                            return item;
                        });
                    })
                    .catch(error => {
                        console.error('请求数据失败', error);
                    });
            },
            fetchItemNumber() {
                axios.get(`http://localhost:8081/performanceController/count`, {})
                    .then(response => {
                        this.totalItems = response.data.data;
                    })
                    .catch(error => {
                        console.error('请求数据失败', error);
                    });
            },
            sortTotalCostTime({ prop, order }) {
                this.sortField = prop;
                this.sortOrder = order === 'ascending' ? 'asc' : 'desc';
                this.fetchData();
            }
        },
        created() {
            this.fetchData();
            this.fetchItemNumber();
        }
    });
</script>

</body>
</html>
